<template>
  <el-dialog title="路由信息" :visible.sync="visible" width="30%" @close="closeHandle">
    <el-form  :model="route" ref="routeForm" :rules="rules" :label-width="formLabelWidth">
      <el-row :gutter="15">
        <el-form-item v-show="false"  prop="id">
          <el-input  v-model="route.id" ></el-input>
        </el-form-item>

        <el-col :span="12">

          <el-form-item label="路径" prop="path">
            <el-input  v-model="route.path" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="服务名" prop="serviceId">
            <el-input  v-model="route.serviceId"  auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="url代理" prop="url">
            <el-input  v-model="route.url" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="敏感请求头" prop="sensitiveHeadersList">
            <el-input  v-model="route.sensitiveHeadersList"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item  label="转发去掉前缀" prop="stripPrefix">
            <el-switch  v-model="route.stripPrefix"> </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="是否重试" prop="retryable">
            <el-switch  v-model="route.retryable"> </el-switch>
          </el-form-item>

        </el-col>
        <el-col :span="5">
          <el-form-item v-show="route.id" label="删除标识" prop="delFlag">
            <el-switch  v-model="route.delFlag"> </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item v-show="route.id"  label="是否可用" prop="enabled">
            <el-switch  v-model="route.enabled"> </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="submitEdit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {saveOrUpdate } from '@/api/config/zuul/';
  //import { getAllRoles } from '@/api/sys/role/';
  export default {
    data() {
      return {
        visible: false,
        route:{
          delFlag: false,
          enabled: true
        },
        formLabelWidth:'100px',
        rules: {
          path: [
            {required: true, message: '请输入转发路径', trigger: 'blur'}
          ],
          serviceId: [
            {required: true, message: '请输入服务名称', trigger: 'blur'},
          ]
        },
      }
    },
    methods: {
      init(row){
        let that =this;
        this.visible =true;
        this.$nextTick(()=> {
          if(row != undefined && row.id){
            that.route = Object.assign({},row);
          }
        })

      },



      closeHandle(){
        this.$refs['routeForm'].resetFields();
        this.visible=false;

      },
      submitEdit(){
        let that = this;
        this.$refs.routeForm.validate(function(valid){
          if(valid){

            saveOrUpdate(that.route).then(function (result) {
              let {code,msg} =result.data;
              if(code == '0'){
                that.$message({
                  type: 'success',
                  message: msg
                });
                that.visible = false;
                that.$emit('refreshDataList');
              }else{
                that.$message.error('执行失败,'+msg);
              }
            }).catch(function (error) {
              // that.$message.error('执行失败,未知异常请联系管理员');
            });
          }
        });
      }
    }



  }

</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
